<template>
  <div class="three-test-box">
    <div class="three-header">
      <div class="left"></div>
      <div class="center">
        <div
          class="item"
          v-for="(item, index) in menuList"
          :key="index"
          @click="handleDraw(item.type)"
        >
          {{ item.label }}
        </div>
      </div>
      <div class="right"></div>
    </div>
    <div class="three-content">
      <div class="three-viewport" id="threeViewport"></div>
    </div>
  </div>
</template>

<script>
import { Tz3dViewport, Tz3DrawType } from './js/3dViewport';
export default {
  props: {},
  components: {},
  data() {
    return {
      viewport: null,
      menuList: [
        { label: '线', type: Tz3DrawType.LINE },
        // { label: '圆', type: Tz3DrawType.CIRCLE },
        { label: '正方形', type: Tz3DrawType.SQUARE },
        { label: '旋转立方体', type: Tz3DrawType.BOX_GEOMETRY },
        { label: '对象', type: Tz3DrawType.OBJECT },
      ],
    };
  },
  created() {},
  mounted() {
    this.initDataFun(); // 初始化数据
  },
  beforeDestroy() {},
  computed: {},
  watch: {},
  methods: {
    // 初始化数据
    initDataFun() {
      this.viewport = new Tz3dViewport({
        viewportDom: document.getElementById('threeViewport'),
      });
    },
    handleDraw(type) {
      this.viewport.createObjects(type);
    },
  },
};
</script>

<style lang="less"></style>

<style lang="less" scoped>
.three-test-box {
  width: 100vw;
  height: 100vh;
  .three-header {
    width: 100%;
    height: 56px;
    display: flex;
    justify-content: space-between;
    .left {
    }
    .center {
      display: flex;
      justify-content: center;
      align-items: center;
      .item {
        height: auto;
        padding: 5px 8px;
        margin-right: 20px;
        border: 1px solid #ebebeb;
        border-radius: 6px;
        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
        cursor: pointer;
        &:hover {
          box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.16);
          color: yellowgreen;
        }
      }
    }
    .right {
    }
  }
  .three-content {
    width: 100%;
    height: calc(100% - 56px);
    position: relative;
    .three-viewport {
      width: 100%;
      height: 100%;
      background-color: #f5f5f5;
      overflow: hidden;
    }
  }
}
</style>
